<!--
 * @Author: 杜家璇
 * @Date: 2022-10-08 09:20:01
 * @LastEditors: 杜家璇
 * @LastEditTime: 2023-07-30 16:52:13
 * @FilePath: \weiNingWeb\src\views\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 用户/公司名, All Rights Reserved. 
-->
<template>
	<div class="index">
		<div class="mainBox">
			<div class="commonBox introduction">
				<div class="heads">
					<div class="titles">社区运动会介绍</div>
					<div class="lineh"></div>
					<div class="zm">INTRODUCE</div>
					<img src="../assets/img/headImg1.png" alt="" />
				</div>
				<div class="conBox">
					<div class="imgs">
						<img v-if="info.picArr" :src="info.picArr[0]" alt="" />
					</div>
					<!-- <div class="textBox">
						山西省社区运动会有着丰富的历史和深厚的背景。它起源于对全民健身的积极响应，是山西省推动群众体育发展的重要举措。随着国家对全民健身战略的重视，山西省积极举办社区运动会，为居民提供了参与体育活动的平台。这不仅满足了人们对健康生活的追求，也加强了社区凝聚力，促进了邻里之间的交流与合作。同时，它还传承和弘扬了山西省的体育文化，丰富了居民的精神文化生活，为构建和谐社区、提升居民幸福感发挥了重要作用。
					</div> -->
					<div class="textBox">{{info.content_basic}}</div>
				</div>
			</div>
			<div class="slBox">
				<div class="itemline">
					<div class="tiels">累计票数</div>
					<div class="numBox">
						<!-- <div v-for="item in voteNum">{{ item }}</div> -->
						<div class="box-item">
							<li
								:class="{
									'number-item': !isNaN(item),
									'mark-item': isNaN(item),
								}"
								v-for="(item, index) in voteNum"
								:key="index">
								<span v-if="!isNaN(item)">
									<i ref="voteNum">0123456789</i>
								</span>
								<span class="comma" v-else>{{ item }}</span>
							</li>
						</div>
					</div>
				</div>
				<div class="itemline">
					<div class="tiels">访问数</div>
					<div class="numBox">
						<!-- <div v-for="item in accessNum">{{ item }}</div> -->
						<!-- <count-to
							class="fws"
							:start-val="startNum"
							:end-val="endNum"
							separator=""
							:duration="1000" /> -->
						<div class="box-item">
							<li
								:class="{
									'number-item': !isNaN(item),
									'mark-item': isNaN(item),
								}"
								v-for="(item, index) in accessNum"
								:key="index">
								<span v-if="!isNaN(item)">
									<i ref="accessNum">0123456789</i>
								</span>
								<span class="comma" v-else>{{ item }}</span>
							</li>
						</div>
					</div>
				</div>
				<div class="itemline">
					<div class="tiels">比赛社区总数量</div>
					<div class="numBox">
						<!-- <div v-for="item in projectNum">{{ item }}</div> -->
						<div class="box-item">
							<li
								:class="{
									'number-item': !isNaN(item),
									'mark-item': isNaN(item),
								}"
								v-for="(item, index) in projectNum"
								:key="index">
								<span v-if="!isNaN(item)">
									<i ref="projectNum">0123456789</i>
								</span>
								<span class="comma" v-else>{{ item }}</span>
							</li>
						</div>
					</div>
				</div>
				<div class="btns">
					<img src="../assets/img/start.png" alt="" />
				</div>
			</div>
			<div class="mapBox">
				<div id="maps">
					<div
						:class="['items', item.type]"
						v-for="item in cityList"
						:key="item.type">
						<div class="names">{{ item.name }}</div>
						<!-- <div class="nums">{{ item.newNum }}</div> -->
						<div class="nums">
							<count-to
								class="fws"
								:start-val="item.oldNum"
								:end-val="item.newNum"
								separator=""
								:duration="1000" />
						</div>
					</div>
				</div>
			</div>
			<div class="commonBox ranking">
				<div class="heads">
					<div class="titles">比赛实时排名</div>
					<div class="lineh"></div>
					<div class="zm">REAL-TIME RANKING</div>
					<img src="../assets/img/headImg1.png" alt="" />
				</div>
				<div class="rankBox">
					<div class="tabHead">
						<div class="mc">名次</div>
						<div class="name">社区名称</div>
						<div class="nums">票数</div>
					</div>
					<div class="tabCon">
						<div
							class="itemLine"
							v-for="(item, index) in rankList"
							:key="item.id">
							<div class="mc">
								<img
									v-if="index == 0"
									src="../assets/img/rankOne (1).png"
									alt="" />
								<img
									v-else-if="index == 1"
									src="../assets/img/rankOne (2).png"
									alt="" />
								<img
									v-else-if="index == 2"
									src="../assets/img/rankOne (3).png"
									alt="" />
								<span class="num" v-else>{{
									index != 9 ? "0" + (index + 1) : index + 1
								}}</span>
							</div>
							<div class="name">{{ item.title }}</div>
							<div class="nums">{{ item.vote_num }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getDetail, getRank,getAreaData } from "../server/api";
import * as echarts from "echarts";
import shanxiJson from "@/assets/json/shanxi.json";
import countTo from "vue-count-to";
export default {
	name: "index",
	components: { countTo },
	data() {
		return {
			// 活动id
			id: "",
			info: {},
			list: [
				{
					name: "小店区平阳路街道滨东社区",
					num: 1000000,
				},
				{
					name: "小店区平阳路街道滨东社区",
					num: 1000000,
				},
				{
					name: "小店区平阳路街道滨东社区",
					num: 1000000,
				},
				{
					name: "小店区平阳路街道滨东社区",
					num: 1000000,
				},
				{
					name: "小店区平阳路街道滨东社区",
					num: 1000000,
				},
				{
					name: "小店区平阳路街道滨东社区",
					num: 1000000,
				},
				{
					name: "小店区平阳路街道滨东社区",
					num: 1000000,
				},
				{
					name: "小店区平阳路街道滨东社区",
					num: 1000000,
				},
				{
					name: "小店区平阳路街道滨东社区",
					num: 1000000,
				},
				{
					name: "小店区平阳路街道滨东社区",
					num: 1000000,
				},
				{
					name: "小店区平阳路街道滨东社区",
					num: 1000000,
				},
			],
			// 总票数
			voteNum: [],
			// 访问
			accessNum: [],
			// 项目
			projectNum: [],
			// 排名列表
			rankList: [],

			// 城市列表
			cityList: [
				{
					name: "大同市",
					oldNum: 0,
					newNum: 0,
					type: "dt",
				},
				{
					name: "塑州市",
					oldNum: 0,
					newNum: 0,
					type: "sz",
				},
				{
					name: "沂州市",
					oldNum: 0,
					newNum: 0,
					type: "xz",
				},
				{
					name: "太原市",
					oldNum: 0,
					newNum: 0,
					type: "ty",
				},
				{
					name: "吕梁地区",
					oldNum: 0,
					newNum: 0,
					type: "ll",
				},
				{
					name: "阳泉市",
					oldNum: 0,
					newNum: 0,
					type: "yq",
				},
				{
					name: "晋中市",
					oldNum: 0,
					newNum: 0,
					type: "jz",
				},
				{
					name: "临汾市",
					oldNum: 0,
					newNum: 0,
					type: "lf",
				},
				{
					name: "长治市",
					oldNum: 0,
					newNum: 0,
					type: "cz",
				},
				{
					name: "运城市",
					oldNum: 0,
					newNum: 0,
					type: "yc",
				},
				{
					name: "晋城市",
					oldNum: 0,
					newNum: 0,
					type: "jc",
				},
			],
			//
			startNum: 0,
			endNum: 100,

			runningDays: ["0"],
			nowNum: 0,
		};
	},
	methods: {
		// 获取详情
		async getAllInfo() {
			let info = await getDetail(this.id);
			let picArr = info.data.picarr.split(",");
			info.data.picArr = picArr;
			this.toRunningNum(info.data.vote_num, "voteNum");
			this.toRunningNum(info.data.access_num, "accessNum");
			this.toRunningNum(info.data.project_num, "projectNum");
			this.info = info.data;
		},
		// 获取排名
		async getRankList() {
			let data = await getRank(this.id);
			let list = data.data.splice(0, 10);
			this.rankList = list;
		},
		// 获取地图数据
		async getAreaDatas(){
			let data = await getAreaData();
			let list = data.data;
			console.log(data,'data')
			let newList = list.map(item=>{
				if(item.city == '太原'){
					return {
						name: "太原市",
						oldNum:this.findOldNum('ty'),
						newNum:item.count,
						type: "ty",
					}
				}
				if(item.city == '大同'){
					return {
						name: "大同市",
						oldNum:this.findOldNum('dt'),
						newNum:item.count,
						type: "dt",
					}
				}
				if(item.city == "忻州"){
					return {
						name: "忻州市",
						oldNum:this.findOldNum('xz'),
						newNum:item.count,
						type: "xz",
					}
				}
				if(item.city == "朔州"){
					return {
						name: "朔州市",
						oldNum:this.findOldNum('sz'),
						newNum:item.count,
						type: "sz",
					}
				}
				if(item.city == "阳泉"){
					return {
						name: "阳泉市",
						oldNum:this.findOldNum('yq'),
						newNum:item.count,
						type: "yq",
					}
				}
				if(item.city == "晋中"){
					return {
						name: "晋中市",
						oldNum:this.findOldNum('jz'),
						newNum:item.count,
						type: "jz",
					}
				}
				if(item.city == "吕梁"){
					return {
						name: "吕梁市",
						oldNum:this.findOldNum('ll'),
						newNum:item.count,
						type: "ll",
					}
				}
				if(item.city == "长治"){
					return {
						name: "长治市",
						oldNum:this.findOldNum('cz'),
						newNum:item.count,
						type: "cz",
					}
				}
				if(item.city == "晋城"){
					return {
						name: "晋城市",
						oldNum:this.findOldNum('jc'),
						newNum:item.count,
						type: "jc",
					}
				}
				if(item.city == "临汾"){
					return {
						name: "临汾市",
						oldNum:this.findOldNum('lf'),
						newNum:item.count,
						type: "lf",
					}
				}
				if(item.city == "运城"){
					return {
						name: "运城市",
						oldNum:this.findOldNum('yc'),
						newNum:item.count,
						// newNum:this.findOldNum('yc') + 1,
						type: "yc",
					}
				}
			});
			this.cityList = JSON.parse(JSON.stringify(newList))
		},
		// 查找旧的数量
		findOldNum(type){
			let obj = this.cityList.find(item=>{
				return item.type == type
			});
			if(obj.newNum){
				return obj.newNum
			}else{
				return 0
			}
		},
		//
		changNum() {
			this.startNum = this.endNum;
			this.endNum = this.endNum + 100;
		},

		// 设置文字滚动
		setNumberTransform(names) {
			const numberItems = this.$refs[names]; // 拿到数字的ref，计算元素数量
			const numberArr = this[names].filter((item) => !isNaN(item));
			// 结合CSS 对数字字符进行滚动,显示订单数量
			for (let index = 0; index < numberItems.length; index++) {
				const elem = numberItems[index];
				elem.style.transform = `translate(-50%, -${
					numberArr[index] * 10
				}%)`;
			}
		},
		// 处理数字
		toRunningNum(num, names) {
			num = num.toString();
			this[names] = num.split(""); // 将其便变成数据，渲染至滚动数组
			this.$nextTick(()=>{
				this.setNumberTransform(names);
			})
		},
	},
	async mounted() {
		console.log(this.$route);
		this.id = this.$route.query.id;
		this.getAllInfo();
		this.getRankList();
		setInterval(() => {
			this.getAllInfo();
			this.getRankList();
			this.getAreaDatas()
		}, 30000);

		// setInterval(() => {
		// 	this.nowNum = this.nowNum + 100;
		// 	this.toRunningNum(this.nowNum);
		// }, 2000);
	},
};
</script>

<style lang="less" scoped>
.index {
	width: 100%;
	height: 100vh;
	background-image: url("../assets/img/bg.png");
	background-size: 100% 100vh;
	position: relative;
	overflow: hidden;
	// transform: translateX(0px) scale(1);
	.mainBox {
		width: 4724px;
		height: 1088px;
		margin: 0 auto;
		margin-top: 160px;
		padding: 0 160px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.commonBox {
			width: 1200px;
			height: 1088px;
			background: linear-gradient(
				180deg,
				#ffd493 0%,
				rgba(255, 194, 144, 0.6) 100%
			);
			border-radius: 20px 20px 20px 20px;
			border: 3px solid rgba(231, 118, 74, 0.6);
			box-sizing: border-box;
			.heads {
				width: 100%;
				height: 76px;
				display: flex;
				align-items: center;
				background-image: url("../assets/img/headBg.png");
				background-size: 417px 76px;
				background-repeat: no-repeat;

				position: relative;
				.titles {
					font-size: 32px;
					color: #c10d00;
					font-weight: bold;
					margin-left: 25px;
				}
				.lineh {
					width: 2px;
					height: 30px;
					background-color: #c10d00;
					margin: 0 24px;
				}
				.zm {
					font-size: 28px;
					color: #c10d00;
					margin-right: 40px;
				}
				img {
					width: 160px;
					height: 24px;
				}
				&::after {
					display: block;
					content: "";
					width: 800px;
					height: 2px;
					background: linear-gradient(
						90deg,
						#e85a47 0%,
						rgba(
								232.00000137090683,
								90.00000223517418,
								71.00000336766243,
								0
							)
							100%
					);
					position: absolute;
					left: 0;
					bottom: 0;
				}
			}
			.conBox {
				width: 100%;
				height: calc(100% - 76px);
				padding: 32px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				.imgs {
					width: 100%;
					height: 600px;
					flex: none;
					img {
						width: 100%;
						height: 600px;
					}
				}
				.textBox {
					flex: 1;
					margin-top: 40px;
					font-size: 30px !important;
					color: #333333;
					line-height: 50px;
				}
			}
			.rankBox {
				width: 100%;
				height: calc(100% - 76px);
				padding: 0 24px;
				box-sizing: border-box;
				.tabHead {
					width: 100%;
					height: 84px;
					display: flex;
					align-items: center;
					line-height: 84px;
					background: linear-gradient(
						-90deg,
						rgba(255, 81, 46, 0.5) 0%,
						#ce0e00 100%
					);
					border-radius: 6px;
					margin-top: 40px;
					div {
						height: 100%;
					}
					.mc {
						width: 220px;
						flex: none;
						font-size: 28px;
						color: #ffeec0;
						padding-left: 64px;
						box-sizing: border-box;
					}
					.name {
						flex: 1;
						font-size: 28px;
						color: #ffeec0;
					}
					.nums {
						flex: none;
						width: 160px;
						font-size: 28px;
						color: #ffeec0;
					}
				}
				.tabCon {
					width: 100%;
					.itemLine {
						width: 100%;
						height: 84px;
						display: flex;
						align-items: center;
						line-height: 84px;
						// background: linear-gradient(
						//     -90deg,
						//     rgba(255, 81, 46, 0.5) 0%,
						//     #ce0e00 100%
						// );
						border-radius: 6px;
						&:nth-child(2n) {
							background: linear-gradient(
								180deg,
								rgba(255, 128, 78, 0.6) 0%,
								rgba(247, 165, 103, 0) 100%
							);
						}
						div {
							height: 100%;
						}
						.mc {
							width: 220px;
							flex: none;
							font-size: 28px;
							color: #ffeec0;
							padding-left: 64px;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							img {
								width: 40px;
								height: 40px;
							}
							.num {
								color: #333333;
							}
						}
						.name {
							flex: 1;
							font-size: 28px;
							color: #333333;
						}
						.nums {
							flex: none;
							width: 160px;
							font-size: 28px;
							color: #333333;
						}
					}
				}
			}
		}
		.slBox {
			width: auto;
			height: 100%;
			padding-top: 190px;
			box-sizing: border-box;
			// margin-left: 230px;
			.itemline {
				display: flex;
				align-items: center;
				margin-bottom: 80px;
				.tiels {
					font-size: 30px;
					color: #333333;
					margin-right: 24px;
				}
				.numBox {
					width: auto;
					display: flex;
					align-items: center;
					// .comma {
					// 	width: 54px;
					// 	height: 64px;
					// 	background: #b5211b;
					// 	box-shadow: inset 0px 4px 10px 0px rgba(58, 0, 0, 0.3);
					// 	border-radius: 8px;
					// 	text-align: center;
					// 	line-height: 64px;
					// 	font-size: 48px;
					// 	// font-weight: bold;
					// 	color: #fff3a7;
					// 	margin-left: 8px;
					// }
				}
			}
			.btns {
				width: 600px;
				height: 118px;
				margin-top: 120px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.mapBox {
			width: 795px;
			height: 100%;
			padding-top: 120px;
			box-sizing: border-box;
			// margin-left: 140px;
			#maps {
				width: 795px;
				height: 905px;
				background-image: url("../assets/img/map.png");
				background-size: 100% 905px;
				position: relative;
				.items {
					position: absolute;
					width: 228px;
					height: 104px;
					background-image: url("../assets/img/mapIcon.png");
					background-size: 100% 104px;
					padding-left: 74px;
					box-sizing: border-box;
					padding-top: 0;
					.names {
						font-size: 18px;
						color: #fff;
						margin-top: 4px;
					}
					.nums {
						font-size: 28px;
						color: #ffffff;
						font-weight: bold;
						margin-top: 0px;
					}
				}
				.dt {
					left: 605px;
					top: 44px;
				}
				.sz {
					left: 392px;
					top: 61px;
				}
				.xz {
					left: 417px;
					top: 184px;
				}
				.ty {
					left: 356px;
					top: 313px;
				}
				.ll {
					left: 162px;
					top: 346px;
				}
				.yq {
					left: 567px;
					top: 317px;
				}
				.jz {
					left: 465px;
					top: 420px;
				}
				.lf {
					left: 149px;
					top: 542px;
				}
				.cz {
					left: 419px;
					top: 546px;
				}
				.yc {
					left: 77px;
					top: 684px;
				}
				.jc {
					left: 333px;
					top: 661px;
				}
			}
		}
	}

	.box-item {
		position: relative;
		height: 80px;
		font-size: 54px;
		line-height: 41px;
		text-align: center;
		list-style: none;
		// color: #2d7cff;
		color: #fff;
		writing-mode: vertical-lr;
		text-orientation: upright;
		/*文字禁止编辑*/
		-moz-user-select: none; /*火狐*/
		-webkit-user-select: none; /*webkit浏览器*/
		-ms-user-select: none; /*IE10*/
		-khtml-user-select: none; /*早期浏览器*/
		user-select: none;
		/* overflow: hidden; */
	}

	/* 默认逗号设置 */
	.mark-item {
		width: 10px;
		height: 100px;
		margin-right: 5px;
		line-height: 10px;
		font-size: 48px;
		position: relative;
		& > span {
			position: absolute;
			width: 100%;
			bottom: 0;
			writing-mode: vertical-rl;
			text-orientation: upright;
		}
	}

	/*滚动数字设置*/
	.number-item {
		// width: 41px;
		// height: 75px;
		// // background: #ccc;
		// list-style: none;
		// margin-right: 5px;
		// // background: rgb(7, 50, 207);
		// border-radius: 4px;
		// // border: 1px solid rgba(7, 50, 207, 1);
		// color: black;
		width: 54px;
		height: 64px;
		background: #b5211b;
		box-shadow: inset 0px 4px 10px 0px rgba(58, 0, 0, 0.3);
		border-radius: 8px;
		text-align: center;
		line-height: 64px;
		font-size: 48px;
		// font-weight: bold;
		color: #fff3a7;
		margin-left: 8px;
		display: flex;
		align-items: center;

		& > span {
			position: relative;
			display: inline-block;
			margin-right: 10px;
			width: 100%;
			height: 100%;
			writing-mode: vertical-rl;
			text-orientation: upright;
			overflow: hidden;
			& > i {
				font-style: normal;
				position: absolute;
				top: 11px;
				left: 50%;
				transform: translate(-50%, 0);
				transition: transform 1s ease-in-out;
				letter-spacing: 10px;
			}
		}
	}
}
</style>
<style>
.el-scrollbar__wrap {
	margin-bottom: 0 !important;
}
</style>
